<template>
  <div class="view-wrapper">
    <div class="head">
      <el-button type="primary" style="margin-bottom: 20px" @click="add"
        >新增爆卡推荐位</el-button
      >
    </div>
    <div class="listBox">
      <ex-table
        ref="table"
        :loading="loading"
        :table-column="tableColumn"
        :table-data="tableData"
        @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange"
      >
        <template v-slot:operate="{ scope }">
          <el-button
            v-if="scope.row.shopName != '-'"
            @click="modify(scope.row)"
            size="small"
            >修改</el-button
          >
          <!-- <el-button
            v-if="scope.row.shopName == '-'"
            @click="add(scope.row)"
            type="primary"
            size="small"
            >添加</el-button
          > -->
          <el-button
            v-if="scope.row.shopName != '-'"
            @click="setDelete(scope.row)"
            type="danger"
            size="small"
            >清空</el-button
          >
        </template>
      </ex-table>
    </div>
    <el-dialog title="爆卡推荐展示位" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="选择商家店铺名称：" :label-width="formLabelWidth">
          <el-select
            v-model="value"
            filterable
            placeholder="请选择"
            @change="change"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择爆卡：" :label-width="formLabelWidth">
          <el-select
            v-model="value2"
            filterable
            placeholder="请选择"
            @change="changeCard"
            no-match-text="该店铺无爆卡"
          >
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序：" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入"
            v-model.number="recommendSort"
            maxlength="5"
            class="input-with-select"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// components
import {
  recommendDelete,
  recommendLs,
  shopPageLs,
  cardExperienceSelect,
  addRecommend,
  modifyBurstcard,
} from "@/api/clientManagement";
import handlePageMixin from "@/mixins/handlePageMixin";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  //   name: "",
  components: {
    ExportExcelButton,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      typeLs: [],
      loading: false,
      dialogFormVisible: false,
      value: "",
      value2: "",
      options: [],
      options2: [],
      formLabelWidth: "150px",
      tableData: [],
      assetId: "", //资产ID
      shopId: "", //店铺ID
      originalAssetId:"",
      recommendSort: "", //排序
      tableColumn: [
        { prop: "cardName", label: "推荐爆卡名称" },
        { prop: "recommendSort", label: "排序号", width: "120" },
        {
          label: "操作",
          slot: true,
          slotName: "operate",
          width: "280",
          fixed: "right",
        },
      ],
      status: 1,
      id: "",
    };
  },
  created() {
    // this.getlinkagelist();
    this.getList();
    this.getselectList();
  },
  computed: {},
  methods: {
    getList() {
      const params = {
        ...this.pageOptions,
      };
      this.loading = true;
      recommendLs(params)
        .then((res) => {
          // res.result.forEach((item) => {
          //   if (item.shopName == "") {
          //     item.shopName = "-";
          //   } else {
          //     item.isShow = item.shopName;
          //   }
          // });
          this.tableData = res.result.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    sumit() {
      console.log(this.status)
      if (this.value == "") {
        this.$message({
          message: "请选择商家店铺",
          type: "error",
          duration: 1500,
        });
        return
      } else if (this.value2 == "") {
        this.$message({
          message: "请选择爆卡",
          type: "error",
          duration: 1500,
        });
         return
      }
      else if (this.recommendSort == "") {
        this.$message({
          message: "请填写排序号",
          type: "error",
          duration: 1500,
        });
         return
      }
      else if (this.recommendSort >= 99999) {
        this.$message({
          message: "请输入小于99999的整数",
          type: "error",
          duration: 1500,
        });
         return
      }
      this.dialogFormVisible = false;
      if (this.status == 1) {
        var params = {
          assetId: this.assetId,
          shopId: this.shopId,
          recommendSort: this.recommendSort,
        };
        addRecommend(params).then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this.getList();
            this.getselectList();
          }, 1000);
        });
      } else {
        var params = {
          shopId: this.shopId,
          recommendSort: this.recommendSort,
          originalAssetId: this.originalAssetId,
          assetId: this.assetId,
          id: this.id,
        };
        modifyBurstcard(params).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this.getList();
            this.getselectList();
          }, 1000);
        });
      }
    },
    add(row) {
      this.recommendSort = "";
      this.value = "";
      this.value2 = "";
      this.assetId = "";
      this.dialogFormVisible = true;
      this.status = 1;
      console.log(this.status)
    },
    modify(row) {
      this.shopId = row.shopId;
      this.assetId = row.assetId;
      this.originalAssetId = row.assetId
      this.value = row.shopName;
      this.value2 = row.cardName;
      this.recommendSort = row.recommendSort;
      this.id = row.id;
      this.getBurstcardList();
      this.status = 2;
      this.dialogFormVisible = true;
    },
    change(e) {
      //选择店铺
      console.log(e);
      this.shopId = e;
      this.getBurstcardList();
      if (this.status == 2) {
        this.value2 = "";
        this.assetId = "";
      }
    },
    changeCard(e) {
      //选择爆卡
      this.assetId = e;
    },
    getselectList() {
      //获取店铺
      const params = {
        pageSize:10000,
        pageNum: 1,
      };
      shopPageLs(params)
        .then((res) => {
          this.options = res.result.records;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getBurstcardList() {
      //获取爆卡下拉列表
      const params = {
        shopId: this.shopId,
      };
      cardExperienceSelect(params)
        .then((res) => {
          this.options2 = res.result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setDelete(e) {
      console.log(e);
      //删除
      this.$confirm("你确定要清空吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          recommendDelete(e.id)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "清空成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getList();
                this.getselectList();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-card-title {
  font-size: 20px;
}
</style>
<style lang="scss" scoped>
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
::v-deep.el-input--medium .el-input__inner {
  width: 202px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.head ::v-deep.el-input-group__prepend {
  width: 110px !important;
}
</style>
